﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>

    <script type="text/javascript" src="js/prototype.js"></script>

    <script>
		
		    Kioskvalt = {};
		    Kioskvalt.ImageKnob = Class.create( {
		    
		        initialize: function( el, opts )
		        {
		            this.element = $(el);
		            
		            this.def = {    
		                image: '',
		                imagecount: 1,
		                imagewidth: 32,
		                imageheight: 32,
		                minimum: 0,
		                value: 50
		                maximum: 100
		            };
		            
		            this.options = Object.extend( this.def, opts || {} );
		            
		            this.grabbed = false;
		            this.grabx = 0;
		            this.graby = 0;
		            
		            this.innervalue = 0.0;
		            
		            this.setValue( this.options.value );
		            
		            this.updateDisplay();
		        },
		        
		        getValue: function()
		        {
		        },
		        
		        setValue: function()
		        {
		        },
		        
		        updateDisplay: function()
		        {
		            this.element.innerHTML = 'knob value='+this.value+'!';
		        }
		    } );
		    
		
    </script>

</head>
<body>
    <h1>
        test</h1>
    <div class="knob" id="knob1">
    </div>
    <select>
        <option>dummy</option>
    </select>
    <div class="knob" id="knob2">
    </div>
    <div class="knob" id="knob3">
    </div>

    <script>
	
	new Kioskvalt.ImageKnob( 'knob1', { image:'img/knobs1.png', width:50, height:37 } );
	new Kioskvalt.ImageKnob( 'knob2', { image:'img/knobs1.png', width:50, height:37 } );
	new Kioskvalt.ImageKnob( 'knob3', { image:'img/knobs1.png', width:50, height:37 } );
	
    </script>

</body>
</html>
